<template>
	<u-swipe-action>
		<!-- 每一项的按钮都相同时 -->
		<u-swipe-action-item v-if="isSameBtn && options && list" :options="options" v-for="(item, index) in list" 
			:name="JSON.stringify(item)" :key="index" @click="onBtnClick" :ref="'swipeAction' + item.id">
			<view class="item-text u-border-bottom" :class="index == 0 ? 'u-border-top': ''" @click="onTextClick(item,index)">
				{{ item[textKey] ? item[textKey] : '' }}
			</view>
		</u-swipe-action-item>
		<!-- 任意一项或多项的按钮不同时 -->
		<u-swipe-action-item v-if="!isSameBtn && list" :options="list.options" v-for="(item, index) in list" 
			:name="JSON.stringify(item)" :key="index" @click="onBtnClick" :ref="'swipeAction' + item.id">
			<view class="item-text u-border-bottom" :class="index == 0 ? 'u-border-top': ''" @click="onTextClick(item,index)">
				{{ item[textKey] ? item[textKey] : ''  }}
			</view>
		</u-swipe-action-item>
	</u-swipe-action>
</template>

<script>
	export default {
		name: "ycy-swipe-action",
		props: {
			textKey: { type: String, default: 'label'},
			isSameBtn: { type: Boolean, default: true },
			options: { type: Array, default: [] },  //[{ text: 'xxx', style: { backgroundColor: 'xxx' } }]  每一项按钮相同时
			list: { type: Array, default: [] },  //[{ label: 'xxx'}] 或 [{ label: 'xxx',options: { text: 'xxx', style: { backgroundColor: 'xxx' }}]
			//并且list的每一项需要有id，用于点击按钮后，自动关闭按钮
		},
		data() {
			return {
				
			};
		},
		methods: {
			onTextClick(item,index) {
				this.$emit('onTextClick', { item, index });
			},
			onBtnClick(btnObject) {
				// console.log('onBtnClick', btnObject)
				this.closeSwipeAction(JSON.parse(btnObject.name).id);
				this.$emit('onBtnClick', btnObject);
			},
			//外部通过该组件的ref拿到该方法，用于手动关闭滑动按钮。
			closeSwipeAction(itemId) {
				const ref = 'swipeAction' + itemId;
				this.$refs[ref][0].closeHandler();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item-text {
		display: flex;
		align-items: center;
		font-weight: bold;
		color: $uni-text-color;
		padding: $spacing-base 0;
		padding-left: $spacing-large;
		border-radius: 16px;
		margin: 6px 12px;
		height: 40px;
		box-shadow: 0 0 12px 4px rgba(0,0,0,0.1);
	}
	//在base.css中设置了右侧按钮的样式
	// .u-swipe-action-item__right__button__wrapper {
	// 	margin: 12px 0;
	// 	border-radius: 16px !important;
	// }
</style>